Tags:
One of the basic rules of accessibility is to not convey information through colour alone. The WCAG lists use of colour as a Level A issue, specifically saying:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
This criterion is aimed at those people with visual disabilities, or problems that have a visual aspect. In this post, I'll show how to test your websites against the various types of colour blindness using SVG filters from within CSS as I did for my accessibility testing browser plugin.
Types of Colour Blindness
Humans percieve colours via the cones in our eyes, with 3 types (typically, although some people have 4) tuned to long, medium, and short waves, which correspond to red, green, and blue vision.
When one of these cone systems fails, the result is colour blindness. Each of the three main colour types can have a full failure to percieve the colour (dichromacy) or partial loss of perception to the colour (anomalous trichromacy).
| Name | Red Vision | Green Vision | Blue Vision | Male Population Affected | Female Population Affected | Affect |
|---|---|---|---|---|---|---|
| Protanomaly | anomalous | normal | normal | 1.3% | 0.02% | Red not percieved as strongly as other colours |
| Protanopia | absent | normal | normal | 1.3% | 0.02% | Unable to see red |
| Deuteranomaly | normal | anomalous | normal | 5% | 0.35% | Green not percieved as strongly as other colours |
| Deuteranopia | normal | absent | normal | 1.2% | 0.01% | Unable to see green |
| Tritanomaly | normal | normal | anomalous | 0.0001% | 0.0001% | Blue not percieved as strongly as other colours |
| Tritanopia | normal | normal | absent | 0.001% | 0.03% | Unable to see blue |
| Achromatopsia | absent | absent | absent | 0.00003% | 0.00003% | Unable to see any colours |
Turning This Into a CSS Filter
CSS alone isn't capable of applying the kind of colour filter that we need, but with the help of SVG and a transformation matrix it can.
What is a Transformation Matrix?
An SVG feColorMatrix element creates a matrix transform that can be applied to any HTML element, be that an image or the entire page. The matrix itself is a 5×4 which alters the various colour components of each pixel.
A good introduction to colour transform matrices is the Into the Matrix with SVG Filters which explains what the values are and gives some examples.
Creating the SVG Filter
A basic feColorMatrix filter looks like this:
<filter>
<feColorMatrix
id="colourMatrix"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
This particular one does nothing, as there is no subtraction or addition to any colour component. In order to actually alter the colours, we need to adjust the values for the type of colour blindness effect we want to test.
Taking protanopia as an example, which is missing red vision. The transform matrix that would achieve that is as follows:
Which results in this SVG snippet:
<filter>
<feColorMatrix
id="protanopiaColourMatrix"
type="matrix"
values=".56667 .43333 0 0 0
.55833 .44167 0 0 0
0 .24167 .75833 0 0
0 0 0 1 0" />
</filter>
Applying the Filter
In my accessibility plugin, I dynamically insert the code into the body of the page I'm testing because I didn't want to have to reference external assets when all I really needed was a few lines of code. However, this need not be the case. You can reference a filter in any external SVG file. This allows you to have a file containing multiple filters if you have the need.
Then it's just a case of altering the style of any element to reference the filter:
.your-element
{
filter: url(#protanopiaColourMatrix);
}
The result is something like this:
A Working Demo
And here is all of it nicely wrapped up into an interactive demo. Select one of the filters from the list of options and see the effect on the source image.
Comments